<template>
  <div class="category">
    <swiper class="swiper" dots-position="center" dots-class="tishi">
      <swiper-item v-for="(tag,index) in tags" :key="index">
        <a :href="ta.url" class="item" v-for="(ta,i) in tag" :key="i" style="width: 20%;height: 45%;">
          <img :src="ta.icon" alt="">
          <p>{{ta.name}}</p>
        </a>
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperItem } from 'vux'
export default {
  name: 'CateGory',
  components: {
    Swiper,
    SwiperItem
  },
  ready () {

  },
  created () {
    this.$http.get('static/json/categories.json').then(response => {
      this.tags = (response.data)
    })
  },
  methods: {
    onSwiperItemIndexChange (index) {
      console.log('demo item change', index)
    },
    demo01_onIndexChange (index) {
      this.demo01_index = index
    }
  },
  data () {
    return {
      tags: []
    }
  }
}

</script>

<style lang='less' scoped>
  .category{
    width: 100%;
    height: 4.72rem /* 354/75 */;
    .swiper{
      margin-top: .133333rem /* 10/75 */;
      text-align: center;
    }
    .item {
      float: left;
      img {
        width: 1.2rem /* 90/75 */;
      }
      p{
        color: #666;
        font-size: 0.32rem;
      }
    }
  }
</style>
